<template>
  <div class="login-wrap" style="background-color:#fff">
    <div class="leftLogo">
      <img src="../assets/img/loginLeft.png" alt="">
    </div>
    <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm login-container">
      <div class='loginTab'>
        <div v-for='(item,index) in tabCar' :key='index' class="tabCar">
         <p @click="tab(index)" :class="{actives:index==num}">{{item.text}}</p>
       </div>
      </div>
      <div class="passLogin" v-if="num==0">
      <el-form-item prop="username" class="phoneInput">
        <h1>手机号码</h1>
        <div class="phones">
          <p class="types">+86 <img src="../assets/img/dropDown.png" alt=""></p>
          <el-input type="text" v-model="ruleForm.username" auto-complete="off" placeholder="注册时填写的手机号"></el-input>
        </div>
      </el-form-item>
      <el-form-item prop="password"  class="phoneInput passInput">
        <h1>密码</h1>
        <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="请填写密码" ></el-input>
      </el-form-item>
      <div class='forget' @click="forget()">忘记密码</div>
      <el-form-item id="loginIndex">
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="logining" style="width:80%;margin-left:10%;">登录</el-button>
      </el-form-item>
      </div>
      <div class="messLogin" v-if="num==1">
        <el-form-item prop="mobile" class="phoneInput">
        <h1>手机号码</h1>
        <div class="phones">
          <p class="types">+86  <img src="../assets/img/dropDown.png" alt=""></p>
          <el-input type="text" v-model="ruleForm.mobile" auto-complete="off" placeholder="注册时填写的手机号"></el-input>
        </div>
      </el-form-item>
        <el-form-item prop="code" class='phoneInput codeInput' >
          <h1>验证码</h1>
          <el-input v-model="ruleForm.code" autocomplete="off" placeholder="请输入验证码">
            <el-button slot="append" v-show="showTime" @click="sendEmail(ruleForm.code)" >发送验证码</el-button>
            <el-button slot="append" v-show="!showTime" >{{sendTime}}秒</el-button>
          </el-input>
        </el-form-item>
        <el-form-item id="loginScend">
          <el-button type="primary" @click="submitForms('ruleForm')" :loading="logining" style="width:80%;margin-left:10%;">登录</el-button>
        </el-form-item>
      </div>
      <el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
    </el-form>
  </div>
</template>
<script type="text/ecmascript-6">
import { setCookie, getCookie, delCookie } from '../utils/util'
export default {
  name: 'login',
  data() {
    return {
      // 验证码
      showTime: true, /* 布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
      sendTime: '', /* 倒计时 计数器 */
      timer: null,
      num:0,
      tabCar:[
        {text:'密码登录'},{text:'短信登录'}
      ],
      //定义loading默认为false
      logining: false,
      // 记住密码
      rememberpwd: '',
      ruleForm: {
        //密码登录----username和password默认为空
        username: '',
        password: '',
        // 短信登录
        mobile:'',
        code: '',
      },
      // rules前端验证
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 11, max:11, message: '请输入正确的手机号', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max:16, message: '长度在 6 到 16 个字符', trigger: 'blur' }],
          mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max:11, message: '请输入正确的手机号', trigger: 'blur' }],
          code: [{ required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 6, max:6, message: '请输入正确的验证码', trigger: 'blur' }
          ]
      }
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.$message({
      message: '账号密码及验证码不为空即可',
      type: 'success'
    })
    this.getuserpwd()
  },
  // 里面的函数只有调用才会执行
  methods: {
    forget(){
      this.$router.push({path:'./forgetPass'})
    },
    /*点击发送验证码时，开始计数，一分钟发送一次*/
    sendEmail(){
      var xhr = new XMLHttpRequest();
      if(this.ruleForm.mobile==''){
        alert('请输入手机号')
      }else{
        this.$axios({
      method: 'post',
      url: '/admin/send_validate_code',
      params: {
        mobile:this.ruleForm.mobile
      },
    })
    .then(res=>{
      console.log(res)
    });
        const TIME_COUNT = 60; //  更改倒计时时间
        if (!this.timer) {
          this.sendTime = TIME_COUNT;
          this.showTime = false;
          this.timer = setInterval(() => {
            if (this.sendTime > 0 && this.sendTime <= TIME_COUNT) {
              this.sendTime--;
            } else {
              this.showTime = true;
              clearInterval(this.timer); // 清除定时器
              this.timer = null;
            }
          }, 1000);
        }
      }
    },
    // 选项卡
    tab(index){
      this.num=index
      // console.log('我是密码')
    },
    // 获取用户名密码
    getuserpwd() {
      if (getCookie('user') != '' && getCookie('pwd') != '') {
        this.ruleForm.username = getCookie('user')
        this.ruleForm.password = getCookie('pwd')
        this.rememberpwd = true
      }
    },
    //获取密码登录
    submitForm(formName) {
      this.$axios({
           method: 'post',
          url:'admin/login_verification',
          params:{
            mobile:this.ruleForm.username,
            password:this.ruleForm.password,
          }  
        })
      .then((res)=>{
        console.log(res,'111111111111111')

        if(res.data.status==1){
          if (this.rememberpwd) {
                //保存帐号到cookie，有效期7天
                setCookie('user', this.ruleForm.username,1)
                //保存密码到cookie，有效期7天
                setCookie('pwd', this.ruleForm.password,1)
              } else {
                delCookie('user')
                delCookie('pwd')
              }
              //如果请求成功就让他2秒跳转路由
              setTimeout(() => {
                this.logining = false
                // 缓存token
                localStorage.setItem('logintoken', res.data.token)
                // 缓存用户个人信息
                localStorage.setItem('userdata', JSON.stringify(res.data))
                this.$store.commit('login', 'true')
                this.$router.push({
                  name: 'statistics',
                  params:{
                    password:this.ruleForm.password,
                  }
                })
              },1000)
            }
        })
    },
//获取短信登录
    submitForms(formName) {
      this.$axios({
           method: 'post',
          url:'admin/login_verification',
          params:{
            mobile:this.ruleForm.mobile,
            code:this.ruleForm.code,
          }  
        })
      .then((res)=>{
        console.log(res,'获取短信登录')
        //如果请求成功就让他2秒跳转路由
        setTimeout(() => {
          this.logining = false
          // 缓存token
          localStorage.setItem('logintoken', res.data.token)
          // 缓存用户个人信息
          localStorage.setItem('userdata', JSON.stringify(res.data))
          this.$store.commit('login', 'true')
          this.$router.push({ path: '/charts/statistics' })
        },1000)
        })
    },

  }
}
//   setTimeout(() => {
      //   this.logining = false
      // // 缓存token
      // localStorage.setItem('logintoken', res.data.token)
      // // 缓存用户个人信息
      // localStorage.setItem('userdata', JSON.stringify(res.config.params.mobile))
     
      // this.$store.commit('login', 'true')
      // this.$router.push({ 
      //     path:'/charts/statistics',
      //     query:{
      //       mobile:this.ruleForm.username
      //     }
      //   })
      //   }, 1000);
</script>
<style scoped>
*{margin: 0;padding: 0;}
.login-wrap {
display: flex;
background-color: #fff;
}
.leftLogo{
width: 30%;
}
.leftLogo img{width: 100%;height: 100vh;display: block;}
.logoLeft{
width: 102px;
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
margin-left:40px;
}
.logoShop{
  width: 282px;
font-size: 44px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
margin-left: 85px;margin-top: 109px;
}

.login-container {
  width: 35%;
  margin: 0 auto;
  /* border: 1px solid red; */
}
.loginTab{
  margin: 0 auto;
  font-size: 22px;font-family: Microsoft YaHei;
  color: #B6B6B6;cursor: pointer;
  display: flex;justify-content: space-around;
  margin-top: 8rem;
}
.loginTab .tabCar{border-right: 1px solid #E1E1E1;text-align: center;width: 50%;}
.loginTab .tabCar:last-child{border-right: none;}
.actives{color: #3D3D3D !important;}
.passLogin,.messLogin{margin-top: 10%;}
/*手机号*/
.phoneInput{border-bottom: 1px solid #EEEEEE;outline:0;width:100%;outline:none;height: 100px;padding-left: 14px;box-sizing: border-box;}
.phoneInput h1{font-size: 20px;}
.phoneInput .phones{display: flex;margin-top: 1.1rem;}
.phoneInput .phones img{vertical-align: middle;width: 23%;}
.phoneInput .types{width:13%;font-size: 20px;color: #666666;}
/deep/.phoneInput .el-input__inner{outline:0;border: none;width:300px;font-size: 16px;color: #5B5A5A;}
/deep/ .phoneInput .el-input{width: 85%;}
/*密码框*/
.passInput{margin-top: 38px;}
/deep/.passInput .el-input__inner{width: 100%;padding: 0;margin-top:0.7rem;}
/*手机号提示*/
/deep/.phoneInput .el-form-item__error{color:#F56C6C;font-size:14px;position:absolute;top:118%;left:1%}
/* 忘记密码 */
.forget{font-size: 20px;font-family: Microsoft YaHei;font-weight: 400;text-decoration: underline;color: #B6B6B6;text-align: right;margin-top: 21px;cursor: pointer;}

/* 登录 */
#loginIndex .el-button--primary{
height: 60px;margin-top:1rem;font-size: 20px;
background: #436AF2;border-radius: 10px;}
/* 短信登录 */
#loginScend .el-button--primary{width: 520px;
height: 65px;margin-top:4rem;font-size: 20px;
background: #436AF2;border-radius: 10px;}
/* 验证码 */
.codeInput{margin-top:38px;}
/deep/ .codeInput .el-input__inner{padding: 0;width: 400px;margin-top: 0.7rem;}
/deep/ .codeInput .el-input-group__append{border:none;color: #436AF2;font-size:20px;padding-top: 0.7rem;}
/deep/ .el-input-group__append, .el-input-group__prepend{background-color: #fff;}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.remember {
  margin-top: 10px;
}

</style>